<template>
	<view class="my-mask-page">
		<u-toast ref="signInToast"></u-toast>
		<navBar back="back" title="签到" justCenter="justCenter" bgColor="rgba(255, 255, 255, 0)" v-if="showNav">
		</navBar>
		<scroll-view scroll-y="true" class="scroll-Y" :style="{height:auto}" @scroll="scroll">
			<view class="task-content">
				<view class="task-content-title">
					每日签到领乐趣粮
				</view>
				<view class="tick-out">
					<view class="tick-out-rate">
						<view class="tick-out-rate-item" v-for="item in 6" :key="item">
							<text>{{item>5?'+50':'累计50'}}</text>
							<img :src="item>5?'https://www.jk334.cn/img/task-selete.png':'https://www.jk334.cn/img/task-exchange.png'"
								alt="" class="tick-out-rate-item-img" />
						</view>
						<view class="tick-out-rate-line">
						</view>
					</view>
					<view class="tick-out-title">
						每日签到即可获得乐趣粮,连续签到8天可获得惊喜大礼包!
					</view>
				</view>
				<view class="task-content-calendar">
					<img src="https://www.jk334.cn/img/sign-calendar.png" alt="" class="sign-calendar" />
					<view class="calenda-sign-in">
						<u-grid :col="4">
							<u-grid-item v-for="(item) in signDayList" :key="item">
								<view class="sign-day-title">
									第{{item.day}}天
								</view>
								<view class="sign-day" :style="{background:item.active==8?'#FFEBEB':'#F5F5F5'}">
									<img :src="changeIcon(item.active,activeDay)" alt=""
										:class="item.active==8?'sign-day-seven':'sign-day-icon'" />
									<view :class="item>activeDay?'sign-day-text':''">
										{{item.active>activeDay?'+15粮':'已签到'}}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>

					<view class="sign-in-btn" :style="{opacity:isSignIn?'0.4':'1'}" @click="signInBtn()">
						立即签到
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="showSign" @close="showSign=false" :round="10" mode="center" bgColor="transparent">
			<u-toast ref="showSignToast"></u-toast>
			<view>
				<view class="popup-sign-in" v-if="activeDay<8">
					<img src="https://www.jk334.cn/img/sign-in-icon.png" alt="" class="sign-in-icon" />
					<view class="sign-in-content">
						<text class="sign-in-success">签到成功</text>
						<text class="sign-in-congrats">恭喜您获得<text style="color:red;">15</text>乐趣粮</text>
					</view>
				</view>
				<view class="receive-bg-content" v-else>
					<img src="https://www.jk334.cn/img/wonderment.png" class="receive-bg-content" alt="" />
					<view class="receive-content-btn">
						<img src="https://www.jk334.cn/img/draw.png" alt="" class="receive-btn-img"
							@click="receiveBtn()" />
						<text style="color:#F92500;font-size: 10px;">提交账号领取惊喜大礼包！</text>
					</view>
				</view>
			</view>
		</u-popup>


		<u-popup :show="showAccount" @close="showAccount=false" :round="16" mode="center" bgColor="transparent">
			<view style="width:600rpx;background-color:#fff; border-radius: 32rpx;">
				<view class="account-title">
					选择任务账号
				</view>
				<view style="display: flex; flex-direction: column; align-items: center;padding: 48rpx 0;">
					<view :class="activeAcc&&activeAcc==item.id?'account-item account-item-active':'account-item'"
						v-for="item in qqList" :key="item.qq" @click="activeAcc=item.id">
						{{item.qq}}
					</view>
					<view @click="comfigQq"
						style="margin-top: 40rpx; width: 320rpx;height: 80rpx;text-align:center;line-height: 80rpx; background: #FFCD2C;border-radius: 80rpx;font-size: 28rpx;font-weight: bold;color: #393319;">
						确定
					</view>
				</view>
			</view>
			<u-toast ref="showAccountToast"></u-toast>
		</u-popup>
	</view>

</template>

<!-- 我的任务-->
<script>
	import navBar from '@/components/navBar/navBar.vue';
	import taskItem from '@/components/taskItem/taskItem.vue';
	import {
		getHeight
	} from '@/utiles/utils.js';
	import {
		myRequest
	} from '@/utiles/api.js'
	export default {
		components: {
			navBar,
			taskItem
		},
		data() {
			return {
				showNav: true,
				signDayList: [{
					day: '一',
					active: 1
				}, {
					day: '二',
					active: 2
				}, {
					day: '三',
					active: 3
				}, {
					day: '四',
					active: 4
				}, {
					day: '五',
					active: 5
				}, {
					day: '六',
					active: 6
				}, {
					day: '七',
					active: 7
				}, {
					day: '八',
					active: 8
				}, ],
				phone: '',
				qqList: [],
				activeAcc: null,
				activeDay: 0, //签到天数
				isSignIn: false, //当日是否签到
				showSign: false, //领取
				showAccount: true, //选择领取的账号
			}
		},
		onShow() {
			this.getAccList()
		},
		methods: {
			scroll({
				detail
			}) {
				if (detail.scrollTop > 120) {
					const windowHeight = getHeight().windowHeight //100vh
					this.heightValue = windowHeight
					this.showNav = false
				} else {
					this.showNav = true
				}
			},

			comfigQq() {
				const {
					activeAcc
				} = this || {}
				if (activeAcc) {

					this.getUserInfo()
				} else {
					this.$refs.showAccountToast.show({
						type: 'error',
						title: '请选择账号',
						message: '请选择账号',
					})
				}
			},
			async getAccList() {
				let phone = uni.getStorageSync('phone')
				this.$refs.showAccountToast.show({
					type: 'loading',
					title: '正在加载',
					message: '加载中',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
				})
				if (!phone) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'applet/GetUsers',
					method: 'POST',
					contentType: 'application/json',
					data: {
						phone: phone,
					}
				})
				if (success) {
					this.$refs.showAccountToast.hide()
					this.phone = phone
					this.qqList = [...data]
				} else {
					this.$refs.signInToast.show({
						type: 'erroe',
						message: message,
						duration: '2000',
					})
				}
			},
			async getUserInfo() {
				const {
					activeAcc
				} = this || {}
				if (!activeAcc) return
				this.$refs.showAccountToast.show({
					type: 'loading',
					title: '正在加载',
					message: '加载中',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
					duration: 60000
				})
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/GetUserInfor',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: activeAcc,
					}
				})
				if (success) {
					const {
						signInDay,
						isSignIn,
						muid
					} = data || {}
					this.$refs.showAccountToast.hide()
					this.showAccount = false
					if (signInDay == 8) {
						this.showSign = true
					}
					this.phone = muid
					this.activeDay = signInDay
					this.isSignIn = isSignIn
				}
			},
			changeIcon(active, activeDay) {
				if (active == 8) {
					return 'https://www.jk334.cn/img/red-envelope.png'
				}
				return active > activeDay ? 'https://www.jk334.cn/img/not-signed-in.png' :
					'https://www.jk334.cn/img/signed-in.png'
			},
			async signInBtn() {
				const {
					isSignIn
				} = this || {}
				if (isSignIn) return
				if (!this.phone) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/SignIn',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: this.phone,
					}
				})
				if (success) {
					this.showSign = true
					this.getUserInfo()
				} else {
					this.$refs.signInToast.show({
						type: 'erroe',
						message: message,
						duration: '2000',
					})
				}
			},
			async receiveBtn() {
				if (!this.activeAcc) return
				this.$refs.showSignToast.show({
					type: 'loading',
					title: '正在加载',
					message: '加载中',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
				})
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'applet/SendOldPhoneNumberSms',
					method: 'POST',
					contentType: 'application/json',
					data: {
						id: this.activeAcc,
					}
				})
				if (success) {
					this.$refs.showSignToast.hide()
					uni.setStorageSync('activeAcc', this.activeAcc)
					this.showSign = false
					uni.navigateTo({
						url: '/pages/Receive/ReceiveUp'
					})
				} else {
					this.$refs.showSignToast.show({
						type: 'erroe',
						message: message,
						duration: '2000',
					})
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.my-mask-page {
		background-image: url('https://www.jk334.cn/img/task-center.png');
		background-size: 750rpx 586rpx;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;


		.task-content {
			margin-top: 400rpx;
			background: #FFFFFF;
			box-shadow: 0px -6rpx 12rpx 0rpx #FDBB66;
			border-radius: 48rpx 48rpx 0px 0px;
			padding: 0 30rpx 30rpx 30rpx;
			z-index: 20;

			.task-content-title {
				width: 424rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
				font-size: 32rpx;
				color: #E8852E;
				font-style: italic;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				background: #FEF7EA;
				border-radius: 0px 0px 40rpx 40rpx;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}

			.tick-out {
				width: 100%;
				// height: 220rpx;
				padding: 24rpx 28rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				border: 2rpx solid #FFD8B1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tick-out-rate {
					position: relative;
					display: flex;
					justify-content: space-between;
					font-size: 20rpx;
					font-weight: 400;
					color: #959595;

					.tick-out-rate-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						z-index: 10;

						.tick-out-rate-item-img {
							width: 40rpx;
							height: 40rpx;
							margin-top: 10rpx;
						}
					}

					.tick-out-rate-line {
						position: absolute;
						bottom: 16rpx;
						left: 50%;
						transform: translate(-50%, 0%);
						width: 294px;
						height: 4rpx;
						background: #FEDFA4;
					}
				}

				.tick-out-title {
					margin-top: 18rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #E57F30;
				}
			}

			.task-content-calendar {
				margin-top: 32rpx;
				padding-bottom: 40rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx 2rpx rgba(255, 133, 0, 0.16);
				border-radius: 24rpx;

				.sign-calendar {
					width: 100%;
					height: 66rpx;
				}

				.calenda-sign-in {
					padding: 0 32rpx;
					font-weight: 400;

					.sign-day-title {
						font-size: 20rpx;
						color: #999999;
						margin: 40rpx 0 12rpx 0;
					}

					.sign-day {
						width: 136rpx;
						height: 140rpx;
						border-radius: 16rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						color: #999999;

						.sign-day-seven {
							width: 50rpx;
							height: 64rpx;
						}

						.sign-day-icon {
							width: 80rpx;
							height: 66rpx;
						}

						.sign-day-text {
							font-size: 30rpx;
							font-weight: bold;
							color: #454545;
						}
					}

				}

				.sign-in-btn {
					width: 520rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #393319;
					background: #FFCD2C;
					box-shadow: 0px 6rpx 12rpx 2rpx rgba(201, 159, 17, 0.3);
					border-radius: 80rpx;
					margin: 0 auto;
					margin-top: 80rpx;

				}
			}
		}

		.popup-sign-in {
			display: flex;
			flex-direction: column;
			align-items: center;

			.sign-in-icon {
				width: 400rpx;
				height: 400rpx;
				z-index: 5;
			}

			.sign-in-content {
				margin-top: -200rpx;
				width: 600rpx;
				height: 380rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				background: #FFFFFF;
				border-radius: 40rpx;

				.sign-in-success {
					font-size: 40rpx;
					font-weight: bold;
					color: #323232;
				}

				.sign-in-congrats {
					margin-top: 16rpx;
					margin-bottom: 80rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #323232;
				}
			}
		}

		.receive-bg-content {
			width: 502rpx;
			height: 674rpx;
			position: relative;

			.receive-content-btn {
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translate(-50%, -25%);
				width: 374rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.receive-btn-img {
					width: 374rpx;
					height: 118rpx;
				}
			}
		}

		.account-title {
			width: 600rpx;
			height: 140rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FDF6EC 100%);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FF8204;
			text-align: center;
			line-height: 140rpx;
		}

		.account-item {
			width: 488rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			margin-top: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			box-sizing: border-box;
		}

		.account-item-active {
			font-size: 28rpx;
			font-weight: bold;
			color: #323232;
			border: 2rpx solid #FF8204;
		}
	}
</style>